// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// require.context() 是webpack提供的一个自动导入的API
// 参数1：加载的文件目录
// 参数2：是否加载子目录
// 参数3：正则，匹配文件
// 返回值：导入函数 fn
// keys() 获取读取到的所有文件列表
// import XtxSkeleton from './xtx-skeleton.vue'
const importFn = require.context('./', false, /\.vue$/)
import Message from './Message'


export default {
    install(app) {
        // app.component(XtxSkeleton.name, XtxSkeleton)
        // console.dir(importFn.keys()) 文件名称数组
        importFn.keys().forEach(key => {
            // 导入组件
            const component = importFn(key).default
            // 注册组件
            app.component(component.name, component)
        })

        // 扩展指令
        defineDirective(app)
        // 如果你想挂载全局的属性，能够通过组件实例调用的属性   this.$message
        app.config.globalProperties.$message = Message
    }
}
import defaultImg from '@/assets/images/200.png'
// 扩展指令
const defineDirective = (app) => {
    // 图片懒加载
    app.directive('lazyload', {
        // binding 是对象，.value就是绑定指令的值
        mounted(el, binding) {
            const observer = new IntersectionObserver(([{ isIntersecting }]) => {
                if (isIntersecting) {
                    // 停止观察
                    observer.unobserve(el)
                    el.onerror = () => {
                        // 图片加载失败 设置默认图
                        el.src = defaultImg
                    }
                    el.src = binding.value
                }
            }, {
                threshold: 0.01
            })
            // 开始观察
            observer.observe(el)
        }
    })
}